<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>票据类型</title>
		<meta name="keywords" content="miniMobile的demo" />
		<meta name="description" content="miniMobile是一个简单易用的移动框架！" />
		<!-- miniMObile.css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<!-- mobileSelect -->
		<link rel="stylesheet" type="text/css" href="plugins/mobileSelect/mobileSelect.css">
		<script src="plugins/mobileSelect/mobileSelect.js" type="text/javascript"></script>
		<!-- icheck -->
		<script src="plugins/icheck/icheck.js" type="text/javascript" charset="utf-8"></script>
		<!-- noUiSlider -->
		<link rel="stylesheet" type="text/css" href="plugins/noUiSlider.10.0.0/nouislider.css" />
		<script src="plugins/noUiSlider.10.0.0/nouislider.js" type="text/javascript" charset="utf-8"></script>
		<!-- switchery -->
		<link rel="stylesheet" type="text/css" href="plugins/switchery/switchery.css"/>
		<script src="plugins/switchery/switchery.js" type="text/javascript" charset="utf-8"></script>
		<!-- iconfont -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
		<style type="text/css">
			.formheader {
				line-height: 0.7rem;
			}
			
			.formheader span {
				display: inline-block;
			}
			
			.formheader input {
				border: none;
			}
			.loadButton{
			    position: absolute;
			    bottom: 0;
			    width: 100%;
			    left: 0;
			}
		</style>
	</head>
	

	<body class="pb12 fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-success t-c o-h">
			<div class="ui-header-l fl w5">
				<img src="./img/triangle_left.png" onclick="javascript:window.history.back(-1);" class="returnBack"/>
				<!--<a href="index.html" class="icon color8 iconfont icon-home_light"></a>-->
			</div>
			<div class="ui-header-c fl f30 w59">
				票据类型
			</div>
			<div class="ui-header-r fr w5">
				<i class="icon iconfont icon-phone"></i>
			</div>
		</header>
		<div class="p3 f34 w75">
			<div class="t-c f36 mb3">个税抵扣月份：2018年9月</div>
			<form action="load.html">
				<div>
					上传类型：
					<div id="selectBox" class="form-control w50 h7" style="display: inline-block; background: url(img/select.png) center right no-repeat; background-size:auto 100%;">
						<span class="color3">请选择</span>
					</div>
				</div>
				<div class="pt2 pb2">
					默认姓名：
					<input type="text" class="w50  form-control" placeholder="张三" disabled="disabled" >
				</div>
				<div>
					票据日期：
					<div id="selectBox2" class="form-control w50 h7" style="display: inline-block; background: url(img/select.png) center right no-repeat; background-size:auto 100%;">
						<span class="color3">请选择</span>
					</div>
				</div>
				
				<div class="t-c mt5 loadButton t-c mb5">
					<input type="submit" class="btn f30 btn-success radius10 p2 w50" value="立即上传" />
				</div>
			</form>
		</div>
		<script type="text/javascript">
			var addressArr = [{
					id: '1',
					value: '教育类',
					childs: [{
							id: '11',
							value: '子女教育'
						},
						{
							id: '12',
							value: '继续教育'
						}
					]
				},
				{
					id: '2',
					value: '医疗类',
					childs: [{
							id: '12',
							value: '大病医疗'
						}
					]
				},
				{
					id: '3',
					value: '住房类',
					childs: [{
							id: '13',
							value: '住房租金'
						},
						{
							id: '14',
							value: '住房贷款'
						}
					]
				},
				{
					id: '4',
					value: '赡养类',
					childs: [{
							id: '15',
							value: '赡养老人'
						}
					]
				}
			];
			var DataArr = [{
					id: '1',
					value: '2018年',
					childs: [{
							id: '1',
							value: '1月'
						},
						{
							id: '2',
							value: '2月'
						},
						{
							id: '3',
							value: '3月'
						},
						{
							id: '4',
							value: '4月'
						},
						{
							id: '5',
							value: '5月'
						},
						{
							id: '6',
							value: '6月'
						},
						{
							id: '7',
							value: '7月'
						},
						{
							id: '8',
							value: '8月'
						},
						{
							id: '9',
							value: '9月'
						},
						{
							id: '10',
							value: '10月'
						},
						{
							id: '11',
							value: '11月'
						},
						{
							id: '12',
							value: '12月'
						},
					]
				},
			];
			//mobileselect 下拉选择框
			var mobileSelect1 = new MobileSelect({
				trigger: '#selectBox',
				title: '单项选择',
				wheels: [{
					data: addressArr
				}],
				position: [1, 1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
				callback: function(indexArr, data) {
					console.log(data);
				}
			});
			//下拉选择框--日期
			var DataArr = new MobileSelect({
				trigger: '#selectBox2',
				title: '日期选择',
				wheels: [{
					data: DataArr
				}],
				position: [0, 1], //初始化定位 打开时默认选中的哪个 如果不填默认为0
				callback: function(indexArr, data) {
					console.log(data);
				}
			});
		</script>
	</body>

</html>